<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <canvas id="my-canvas" width="800" height="600" ></canvas>
    <div class="cover">
        <img src="./static/title.png" alt="" class="title">
        <p class="rule">游戏规则:鼠标左键发射小球，移动鼠标拖动挡板，直到生命耗尽</p>
        <button class="start-btn">开始游戏</button>
    </div>
    <div class="over">
        <img src="./static/over.png" alt="" class="title">
        <p>F5重新开始</p>
    </div>
    <script src="./js/randomNum.js"></script>
    <script src="./js/imagesList.js"></script>
    <script src="./js/life.js"></script>
    <script src="./js/Ball.js"></script>
    <script src="./js/Block.js"></script>
    <script src="./js/BlockManager.js"></script>
    <script src="./js/Racket.js"></script>
    <script src="./js/StaticResouces.js"></script>
    <script src="./js/FrameUtil.js"></script>
    <script src="./js/Game.js"></script>
    <script>
        const cover = document.querySelector('.cover')
        const startBtn = document.querySelector('.start-btn')
        const over = document.querySelector('.over')
        startBtn.addEventListener('click',function () {
            cover.style.display = 'none'
        })
        const game = new Game({
            id: 'my-canvas',
            fps: 120
        })
    </script>
</body>
</html>